<template>
    <div>
        <el-container>
            <el-header class='clear'>
                <span>桌位列表</span>
                <div id='btn'>
                    <el-button type="success" round @click="onAdd">添加</el-button>
                    <el-button type="success" round>批量新增</el-button>
                </div>
            </el-header>
            <el-container>
                <!-- 区域 -->
                <el-aside width="200px">
                    <el-table :data="areaData" stripe style="width: 100%">
                        <el-table-column prop="area" label="区域" width="180"></el-table-column>
                    </el-table>
                </el-aside>
                <!-- 桌位列表 -->
                <el-main>
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="tableId" label="编号" width="180"></el-table-column>
                        <el-table-column prop="tableName" label="桌位名称" width="180"></el-table-column>
                        <el-table-column prop="tableNum" label="可容纳人数" width="180"></el-table-column>
                        <el-table-column prop="tableArea" label="所属区域" width="180"></el-table-column>
                        <el-table-column prop="tableType" label="状态" width="180"></el-table-column>
                        
                        
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped lang='less'>
    .clear::after{
        content: '';
        display: block;
        clear: both;
    }
    .el-header{
        background: #F2F2F2;
        height: 50px !important;
        line-height: 50px !important;
        #btn{
            float: right;
        }
        // .el-button{
        //     height: 20px;
        //     line-height: 20px;
        // }
    }
</style>
<script>
export default {
    data(){
        return{
            // 区域数据
            areaData:[
                {
                    area:'A区'
                },
                {
                    area:'B区'
                },
                {
                    area:'C区'
                }
            ]
        }
    },
    methods: {
        onAdd(){

        }
    }
}
</script>